ComponentOne Maps for UWP
Maps for UWP Tutorials / Marking a Route with a C1VectorPolyline / Step 2 of 3: Adding Code
In This Topic
    Step 2 of 3: Adding Code
    In This Topic

    In this step, you'll add code to create both the C1VectorPolyline and the cities on your map.

    1. Enter Code view and import the following namespaces:
    C#
    Copy Code 
    using C1.Xaml.Maps;
    1. Directly below your project's namespace declaration, add the following class:
    C#
    Copy Code 
    public class City
{
    public Point LongLat { get; set; }
    public string Name { get; set; }
}
    1. Below the InitializeComponent() method, you'll start to create the C1VectorLayer that will hold your C1VectorPolyline:
    C#
    Copy Code 
    // Create layer and add it to the map
C1VectorLayer C1VectorLayer1 = new C1VectorLayer();
maps.Layers.Add(C1VectorLayer1);
    1. Next, create the points for your C1VectorPolyline:
    C#
    Copy Code 
    // Initial track
Point[] pts = new Point[]
{
    new Point(37.6167, 55.7500),
    new Point(40.4167, 56.1333),
    new Point(44.0075, 56.3269),
    new Point(49.6500, 58.6000),
    new Point(56.3167, 58.0000),
    new Point(60.5833, 56.8333),
    new Point(65.5333, 57.1500),
    new Point(73.3667, 54.9833),
    new Point(82.9333, 55.0167),
    new Point(93.0667, 56.0167),
    new Point(98.0167, 55.9500),
    new Point(104.2958, 52.3122),
    new Point(103.6833, 51.7176),
    new Point(103.7500, 51.6333),
    new Point(104.0000, 51.3020),
    new Point(105.8667, 51.7176),
    new Point(107.6000, 51.8333),
    new Point(113.4667, 52.0500),
    new Point(123.9333, 53.9833),
    new Point(128.4667, 50.9167),
    new Point(132.9011, 48.8014),
    new Point(135.0667, 48.4833),
    new Point(131.9667, 43.8000),
    new Point(131.9000, 43.1333),
};
    1.  Create a collection of points and fill it with the previously created points:
    C#
    Copy Code 
     // Create collection and fill it
 PointCollection pcoll = new PointCollection();
 foreach (Point pt in pts)
     pcoll.Add(pt);
    1. Add a polyline to the vector layer, assign the Points collection to the polyline, and adjust the polyline's appearance:
    C#
    Copy Code 
    // Create a polyline and add it to the vector layer as a child
C1VectorPolyline C1VectorPolyline1 = new C1VectorPolyline();
C1VectorLayer1.Children.Add(C1VectorPolyline1);
// Points
C1VectorPolyline1.Points = pcoll;
// Appearance
C1VectorPolyline1.Stroke = new SolidColorBrush(Colors.Red);
C1VectorPolyline1.StrokeThickness = 1;
    1. Finally, create your list of cities and add them to the C1Maps control through the DataContext. These cities mark the major stops on the Trans-Siberian Railroad:
    C#
    Copy Code 
          City[] cities = new City[]
 {
    new City(){LongLat= new Point(37.6167, 55.7500), Name="Moscow"},
    new City(){LongLat= new Point(40.4167, 56.1333), Name="Vladimir"},
    new City(){LongLat= new Point(44.0075, 56.3269), Name="Nizhny Novgorod"},
    new City(){LongLat= new Point(49.65, 58.6), Name="Kirov"},
    new City(){LongLat= new Point(56.3167, 58.000), Name="Perm"},
    new City(){LongLat= new Point(60.5833, 56.8333), Name="Yekaterinburg"},
    new City(){LongLat= new Point(65.5333, 57.1500), Name="Tyumen"},
    new City(){LongLat= new Point(73.3667, 54.9833), Name="Omsk"},
    new City(){LongLat= new Point(82.9333, 55.0167), Name="Novosibirsk"},
    new City(){LongLat= new Point(93.0667, 56.0167), Name="Krasnoyarsk"},
    new City(){LongLat= new Point(98.0167, 55.9500), Name="Tayshet"},
    new City(){LongLat= new Point(104.2958, 52.3122), Name="Irkutsk"},
    new City(){LongLat= new Point(107.6000, 51.8333), Name="Ulan Ude"},
    new City(){LongLat= new Point(113.4667, 52.05), Name="Chita"},
    new City(){LongLat= new Point(132.9011, 48.8014), Name="Birobidzhan"},
    new City(){LongLat= new Point(135.0667, 48.4833), Name="Khabarovsk"},
    new City(){LongLat= new Point(131.9667, 43.8000), Name="Ussuriysk"},
    new City(){LongLat= new Point(131.9, 43.1333), Name="Vladivostok"},
 };
      maps.DataContext = cities;
  }

     In this step, you created the code for your application. This code created a C1VectorLayer and a collection of points, added the points to a collection, and assigned the points to a C1VectorPolyline. Then you adjusted the C1VectorPolyline's appearance and added a list of cities to be marked on your map.

    In the next step, you'll run your application.